<template>
	<view class="bindMailbox">
		<u-navbar @leftClick="leftClick" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="" style="width: 190rpx;margin: 0 auto;margin-top: 96rpx;">
			<image src="../../static/image/logo.png" mode=""
				style="width: 190rpx;height: 190rpx;border-radius: 100rpx;"></image>
		</view>

		<view class="inputBox">
			<u--input placeholder="请输入邮箱号" v-model="email" border="bottom" clearable></u--input>
		</view>
		<view class="inputBox" style="margin-top: 20rpx;">
			<u--input class="inputitem" type="password" v-model="password" placeholder="请输入密码" border="bottom"
				clearable></u--input>
			<view v-if="codeFlag" class="ysm" @click="handleSendcode">
				忘记密码
			</view>
		</view>



		<view class="btns" @click="handleBindemail">
			登录
		</view>
		<view class="checkBox">
			<u-checkbox-group @change="handleCheck">
				<u-checkbox v-model="checked" shape="circle" activeColor="#255A9B"></u-checkbox>
			</u-checkbox-group>
			<view class="">
				已阅读并同意
			</view>
			<view class="" style="color:#255A9B;" @click="handleYinsi">
				《隐私协议》
			</view>
		</view>
		<view class="jump" @click="handleJump">
			返回首页
		</view>

		<view class="" style="position: absolute;right: 0;bottom: 200rpx;">
			<image src="../../static/image/concat.png" style="width: 100rpx;height: 100rpx;" mode=""
				@click="handleConcat"></image>
		</view>

	</view>
</template>

<script>
	import {
		login,getConfig
	} from "@/api/api.js"
	export default {
		data() {
			return {
				email: "",
				password: "",
				codeFlag: true,
				time: 60,
				checked: false,
				moblie:"",
			}
		},
		onLoad() {
			this.handlegetConfig()
		},
		methods: {
			handleCheck(e) {
				this.checked = !this.checked
			},
			async handleSendcode() {
				uni.navigateTo({
					url: "./index"
				})
			},
			handleYinsi() {
				uni.navigateTo({
					url: "./yinsiXieyi"
				})
			},
			async handleBindemail() {
				console.log(",", this.checked)
				if (this.email == "") {
					uni.showToast({
						title: '请输入邮箱账号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.password == "") {
					uni.showToast({
						title: '请输入账号密码！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.checked == false) {
					uni.showToast({
						title: '请先同意隐私协议！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let res = await login({
					email: this.email,
					password: this.password
				})
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1800
					});
					uni.setStorageSync('token', res.data)
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/index"
						})
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleJump() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			async handlegetConfig(){
				let res = await getConfig()
				this.moblie = res.data[3].value
			},
			handleConcat() {
				uni.makePhoneCall({
					phoneNumber: this.moblie,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("取消")
					},
				});
			},
			leftClick() {

			},
		}
	}
</script>

<style scoped lang="scss">
	.checkBox {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin-left: 185rpx;
		margin-top: 30rpx;
	}

	.bindMailbox {
		width: 100%;
		height: 100%;
		background-color: #ffffff;

		.inputBox {
			width: 638rpx;
			margin: 0 auto;
			margin-top: 176rpx;
			position: relative;

			.ysm {
				width: 200rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #255A9B;
				line-height: 24rpx;
				position: absolute;
				right: -50rpx;
				top: 20rpx;
				z-index: 999;
			}

		}

		.btns {
			width: 622rpx;
			height: 88rpx;
			background: #255A9B;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 66rpx;
		}

		.jump {
			width: 148rpx;
			height: 36rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #255A9B;
			line-height: 36rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			text-align: center;
		}
	}
</style>